import React, { Component } from 'react';
import Logo from './Logo';

export default class MouseWithLogo extends Component {
    constructor(props) {
        super(props);
        this.handleMouseMove = this.handleMouseMove.bind(this);
        this.state = { x: 0, y: 0 };
      }
    
    handleMouseMove(event) {
        this.setState({
          x: event.clientX,
          y: event.clientY
        });
    }
    
    render() {
        return (
          <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
    
            {/*
              我们可以在这里换掉 <p> 的 <Cat>   ......
              但是接着我们需要创建一个单独的 <MouseWithSomethingElse>
              每次我们需要使用它时，<MouseWithCat> 是不是真的可以重复使用.
            */}
            <Logo mouse={this.state} />
          </div>
        );
    }
}
